<template>
  <section class="m-istyle">
    <dl @mouseover="over">
      <dt>有格调</dt>
      <dd
        :class="{active:kind==='all'}"
        kind="all"
        keyword="景点"
      >全部</dd>
      <dd
        :class="{active:kind==='part'}"
        kind="part"
        keyword="美食"
      >约会聚餐</dd>
      <dd
        :class="{active:kind==='spa'}"
        kind="spa"
        keyword="丽人"
      >丽人SPA</dd>
      <dd
        :class="{active:kind==='movie'}"
        kind="movie"
        keyword="电影"
      >电影演出</dd>
      <dd
        :class="{active:kind==='travel'}"
        kind="travel"
        keyword="旅游"
      >品质出游</dd>
    </dl>
    <ul class="ibody">
      <li v-for="item in current" :key="item.title">
        <el-card :body-style="{padding: '0px'}" shadow="never">
          <img class="image" :src="item.img" alt="">
          <ul class="cbody">
            <li class="title">{{item.title}}</li>
            <li class="pos">
              <span>{{item.pos}}</span>
            </li>
            <li class="price" v-if="!Array.isArray(item.price)">
              ¥
              <em>{{item.price}}</em>
              <span>/起</span>
            </li>
            <li class="price" v-else>暂无</li>
          </ul>
        </el-card>
      </li>
    </ul>
  </section>
</template>

<script>
  export default {
    data(){
      return{
        kind: 'all',
        list: {
          all: [],
          part: [],
          spa: [],
          movie: [],
          travel: []
        }
      }
    },
    computed: {
      current(){
        return this.list[this.kind]
      }
    },
    async mounted() {
      const _this = this
      let {status, data: {count, pois}} = await _this.$axios.get('/search/resultsByKeywords', {
        params: {
          keyword: '景点',
          city: _this.$store.state.position.position.city
        }
      })
      if(status === 200 && count > 0){
        let r = pois.filter(item => item.photos.length).map(item => {
          return {
            title: item.name,
            pos: item.type.split(';')[0],
            price: item.biz_ext.cost || '暂无',
            img: item.photos[0].url,
            url: '//abc.com'
          }
        })
        _this.list[_this.kind] = r.slice(0, 9)
      }else{
        _this.list[_this.kind] = []
      }
    },
    methods: {
      async over(e){
        let dom = e.target
        let tag = dom.tagName.toLowerCase()
        const _this = this
        if(tag === 'dd'){
          this.kind = dom.getAttribute('kind')
          let keyword = dom.getAttribute('keyword')
          let {status, data:{count, pois}} = await _this.$axios.get('/search/resultsByKeywords', {
            params: {
              keyword,
              city: _this.$store.state.position.position.city
            }
          })
          if(status === 200 && count > 0){
            let r = pois.filter(item => item.photos.length).map(item => {
              return {
                title: item.name,
                pos: item.type.split(';')[0],
                price: item.biz_ext.cost || '暂无',
                img: item.photos[0].url,
                url: '//abc.com'
              }
            })
            _this.list[_this.kind] = r.slice(0, 9)
          }else{
            _this.list[_this.kind] = []
          }
        }
      }
    }
  }
</script>

<style lang="scss">
@import  '@/assets/css/index/artistic.scss'
</style>